import 'package:flutter/material.dart';
import '../../theme/app_theme.dart';

class TaskCategoryGrid extends StatelessWidget {
  final List<Map<String, dynamic>> taskCategories;
  final Animation<double> scaleAnimation;

  const TaskCategoryGrid({
    Key? key,
    required this.taskCategories,
    required this.scaleAnimation,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: scaleAnimation,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "任务分类",
            style: TextStyle(
              fontSize: AppTheme.fontSizeXL,
              fontWeight: FontWeight.bold,
              color: AppTheme.textPrimaryColor,
            ),
          ),
          const SizedBox(height: AppTheme.paddingL),
          GridView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: AppTheme.paddingM,
              mainAxisSpacing: AppTheme.paddingM,
              childAspectRatio: 1.1,
            ),
            itemCount: taskCategories.length,
            itemBuilder: (context, index) {
              final category = taskCategories[index];
              return _buildCategoryCard(
                name: category['name'],
                icon: category['icon'],
                colorGradient: category['color'],
                bgGradient: category['bgColor'],
                count: category['count'],
                isAction: category['isAction'] ?? false,
                index: index,
              );
            },
          ),
        ],
      ),
    );
  }

  Widget _buildCategoryCard({
    required String name,
    required IconData icon,
    required LinearGradient colorGradient,
    required LinearGradient bgGradient,
    required int count,
    bool isAction = false,
    required int index,
  }) {
    return TweenAnimationBuilder<double>(
      duration: Duration(milliseconds: 300 + (index * 100)),
      tween: Tween(begin: 0.0, end: 1.0),
      builder: (context, value, child) {
        return Transform.scale(
          scale: value,
          child: Container(
            decoration: BoxDecoration(
              gradient: bgGradient,
              borderRadius: BorderRadius.circular(AppTheme.radiusXL),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.05),
                  blurRadius: 15,
                  offset: const Offset(0, 5),
                ),
                BoxShadow(
                  color: Colors.white.withOpacity(0.9),
                  blurRadius: 15,
                  offset: const Offset(0, -2),
                ),
              ],
              border: Border.all(
                color: Colors.white.withOpacity(0.6),
                width: 1,
              ),
            ),
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                borderRadius: BorderRadius.circular(AppTheme.radiusXL),
                onTap: () {
                  if (isAction) {
                    // 处理创建新板块的逻辑
                  } else {
                    // 导航到对应分类的任务列表
                  }
                },
                child: Padding(
                  padding: const EdgeInsets.all(AppTheme.paddingL),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      // 图标容器
                      Container(
                        width: 60,
                        height: 60,
                        decoration: BoxDecoration(
                          gradient: colorGradient,
                          borderRadius: BorderRadius.circular(AppTheme.radiusL),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.1),
                              blurRadius: 10,
                              offset: const Offset(0, 4),
                            ),
                          ],
                        ),
                        child: Icon(
                          icon,
                          color: Colors.white,
                          size: 28,
                        ),
                      ),
                      const SizedBox(height: AppTheme.paddingM),

                      // 类别名称
                      Text(
                        name,
                        style: const TextStyle(
                          fontSize: AppTheme.fontSizeL,
                          fontWeight: FontWeight.bold,
                          color: AppTheme.textPrimaryColor,
                        ),
                        textAlign: TextAlign.center,
                      ),

                      // 任务数量（如果不是操作按钮）
                      if (!isAction) ...[
                        const SizedBox(height: AppTheme.paddingXS),
                        Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: AppTheme.paddingM,
                            vertical: AppTheme.paddingS,
                          ),
                          decoration: BoxDecoration(
                            color: Colors.white.withOpacity(0.8),
                            borderRadius: BorderRadius.circular(AppTheme.radiusM),
                          ),
                          child: Text(
                            '$count 个任务',
                            style: const TextStyle(
                              fontSize: AppTheme.fontSizeS,
                              color: AppTheme.textSecondaryColor,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ),
                      ],
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
} 